<template>
  <div>
    <li @mouseover="isEdit = true" @mouseleave="isEdit = false" class="li">
      <div class="Class">
        <label class="info" id="class">{{ thing.classId }}</label>
      </div>
      <div class="Course">
        <label class="info" id="course">{{ thing.courseName }}</label>
      </div>
      <div class="Teacher">
        <Label class="info" id="teacher">{{ thing.teacherName }}</Label>
      </div>
      <div class="IsCommend">
        <Label class="info" id="isCommend">{{ thing.evaluationContext }}</Label>
      </div>
      <div class="Button">
        <button v-show="isEdit" class="button" @click="viewDetailMethod">
          查看详情
        </button>
      </div>
    </li>
    <view-details class="view" v-show="ifViewDetails" :fileList="fileList" />
  </div>
</template>
  
  <script>
import axios from "axios";
import { serverAddress } from "../js/config";
import ViewDetails from "../components2/ViewDetails.vue";
export default {
  components: { ViewDetails },
  name: "OneOfAssessment",
  props: ["thing"],
  data() {
    return {
      isEdit: false,
      ifViewDetails: false,
      fileList: null,
      commend: null,
    };
  },
  methods: {
    reviewCommend(Text) {
      axios({
       /*  url:`${serverAddress}/evaluationLook/rootClassEv`, */
        url: "https://mock.apifox.com/m2/3662090-0-default/133672240",
        method: "POST",
        data: {
          courseName: this.thing.courseName,
          classId: this.thing.classId,
          class_ev: Text,
        },
      });
      this.thing.evaluationContext = "已评价";
    },
    closeView() {
      this.ifViewDetails = false;
    },
    viewDetailMethod() {
      if (sessionStorage.getItem("Identity") === "管理员") {
        axios({
          /* url:`${serverAddress}/evaluationLook/root`, */
          url: "https://mock.apifox.com/m2/3662090-0-default/133539591",
          method: "POST",
          data: {
            courseName: this.thing.courseName,
            classId: this.thing.classId,
          },
        }).then((Response) => {
          console.log(Response.data.data);
          this.fileList = Response.data.data.fileSumAddr;
        });
        this.ifViewDetails = !this.ifViewDetails;
      }
      if (sessionStorage.getItem("Identity") === "教师") {
        axios({
         /*  url:`${serverAddress}/evaluationLook/teacher`, */
          url: "https://mock.apifox.com/m2/3662090-0-default/133540594",
          method: "POST",
          data: {
            courseName: this.thing.courseName,
            classId: this.thing.classId,
            teacherId: sessionStorage.getItem("Id"),
          },
        }).then((Response) => {
          console.log(Response.data.data);
          this.fileList = Response.data.data.fileSumAddr;
          this.commend = Response.data.data.classEv;
        });
        this.ifViewDetails = !this.ifViewDetails;
      }
    },
    getCommend(){
      return this.commend;
    }
  },
};
</script>
  

<style scoped>
.view {
  background-color: #ffffff;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}
.li {
  display: flex;
  flex-direction: row;
}
.Course,
.IsCommend {
  background-color: rgba(242, 245, 248, 0.6);
}
.Class,
.Teacher,
.Button {
  background-color: rgba(255, 255, 255, 0.7);
}
.Class,
.Course,
.Teacher,
.IsCommend,
.Button {
  overflow: hidden; /* 隐藏溢出内容 */
  white-space: nowrap; /* 防止换行 */
  height: 40px;
  border: 0.5px solid rgba(178, 178, 178, 0.8);
}
.Class {
  width: 150px;
  border-left: 4px solid rgb(181, 188, 203);
}
.Course {
  width: 300px;
}
.Teacher {
  width: 250px;
}
.IsCommend {
  width: 200px;
}
.Button {
  width: 170px;
}
.info {
  position: relative;
  top: 8px;
  left: 20px;
}
li {
  height: 40px;
  width: 1050px;
}
li button {
  float: right;
  margin-top: 2px;
}
.button {
  height: 33px;
  width: 100px;
  background-color: rgb(76, 130, 210);
  border-radius: 10px;
  border: 1px solid rgb(140, 160, 233);
  color: #ffffff;
  font-size: 17px;
  position: relative;
  top: 1px;
  right: 30px;
}
li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
li:hover {
  /* 鼠标悬浮效果 */
  background-color: #e2e1e1;
}
</style>